<template>
  <view class="ve-navbar" :style="{ height: 88 + statusBarHeight * 2 + 'rpx' }">
    <!-- 不要删这个1，删了会导致更多筛选塌陷 -->
    <text style="opacity: 0">holder</text>
    <view class="ve-navbar__placeholder"></view>
    <view class="ve-navbar--fixed" :style="{ background: bgColor }">
      <view class="ve-navbar__safe__bar" :style="{ height: statusBarHeight * 2 + 'rpx' }"></view>
      <view class="ve-navbar__content">
        <view class="ve-navbar__content__left" :hover-start-time="150" @tap="leftClick">
          <slot name="left">
            <view class="ve-navbar__content__left__btn" v-if="showBackIcon">
              <ve-icon name="back" width="42" height="42" />
            </view>
          </slot>
        </view>
        <slot name="center">
          <text class="ve-navbar__content__title">
            {{ title }}
          </text>
        </slot>
        <view class="ve-navbar__content__right" v-if="$slots.right || showFilter" @tap="rightClick">
          <slot name="right"></slot>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  const props = defineProps({
    // 标题
    title: {
      type: [String, Number],
      default: '',
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: '#ffffff',
    },
    // 是否显示返回按钮
    showBackIcon: {
      type: Boolean,
      default: true,
    },
    // 点击左侧区域(返回图标)，是否自动返回上一页
    autoBack: {
      type: Boolean,
      default: true,
    },
    // 是否显示筛选
    showFilter: {
      type: Boolean,
      default: true,
    },
  })
  // 获取屏幕边界到安全区域距离
  const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
  const emits = defineEmits(['leftClick', 'rightClick'])
  // 点击左侧区域
  const leftClick = () => {
    if (props.showBackIcon) {
      // 如果配置了autoBack，自动返回上一页
      emits('leftClick')
      if (props.autoBack) {
        uni.navigateBack()
      }
    }
  }
  // 点击右侧区域
  const rightClick = () => {
    emits('rightClick')
  }
</script>

<style lang="scss" scoped>
  @mixin flex($direction: row) {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: $direction;
  }
  .ve-navbar {
    &--fixed {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      z-index: 11;
    }

    &__placeholder {
      height: 88rpx;
    }
    &__safe__bar {
      background-color: transparent;
    }
    &__content {
      @include flex(row);
      align-items: center;
      height: 88rpx;
      line-height: 88rpx;
      position: relative;
      justify-content: center;

      &__left,
      &__right {
        padding: 0 32rpx;
        position: absolute;
        top: 0;
        bottom: 0;
        @include flex(row);
        align-items: center;
        &__btn {
          font-weight: 400;
        }
      }

      &__left {
        left: 0;
      }

      &__title {
        text-align: center;
        color: #1d2129;
        font-size: 32rpx;
        font-weight: 500;
      }

      &__right {
        right: 0;
      }
    }
  }
</style>
